import { useState,useEffect } from "react";
import { useNavigate } from "react-router-dom";
import scene from "./index.scss";
import SceneTable from "./sceneTable"
import {PlusOutlined} from "@ant-design/icons"
import {
  Button,
  Form,
  Input,
  Select,
  Col,
  PageHeader,
  Divider,
  Menu,
  Dropdown,
} from "antd";
import qingqiu from "../../../../api/AllHanxin"
import moment from "moment";
//全局
// 下拉渲染
const traverse = (arr) => {
  let selectList = [];
  arr.map((v, i) =>
    selectList.push(
      <Select.Option value={v} key={i}>
        {v}
      </Select.Option>
    )
  );
  return selectList;
};


//组件本身
const SceneMarket = () => {
  // 跳转
  const navigate = useNavigate();
  // 获取数据
  const [tableData,setTableData] = useState([]);
  const sceneData = (obj)=>{
    qingqiu.sceneGetData(obj).then((res)=>{
      console.log(res);
      let a = res.data;
      let Datas = [...a];
      for (let i = 0; i < Datas.length; i++) {
        Datas[i].addTime=moment(Datas[i].addTime).format("YYYY/MM/DD HH:mm:ss")
        Datas[i].activityTime=moment(Datas[i].activityTime).format("YYYY/MM/DD HH:mm:ss")
      }
      console.log(Datas)
      setTableData(Datas);
    });
  }
  // 查询
  const [searchTable] = Form.useForm()
  const onFinish = ()=>{
    console.log(searchTable.getFieldsValue());
    sceneData(searchTable.getFieldsValue())
  }
  // 重置
  const reset = ()=>{
    searchTable.setFieldsValue({
      state:"全部",marketingName:""
    })
    sceneData({})
  }
  const handleChange = (value) => {
    console.log(`selected ${value}`);
  };
const statusClass = ["全部", "未开始", "进行中", "已结束"];
//   页头
const routes = [
  {
    path: "index",
    breadcrumbName: "营销管理",
  },
  {
    path: "first",
    breadcrumbName: "场景营销",
  },
];
// 跳转到添加
const AddJump = ()=>{
  navigate('/home/market/sceneAdd',{state:{a:111}})
}
// 新建下拉菜单
const getItem=(key,tit)=>{
  return {
    key,
    label:tit
  }
}
const items = [
  getItem("AddBirth","生日营销活动"),
  getItem("AddJieRi","节日营销活动"),
  getItem("AddMenber","会员回馈营销活动"),
  getItem("AddOther","其他营销活动"),
]
const menu = (
  <Menu 
  onClick={AddJump}
    items={
      items
    }
  />
);
// 编辑页
const fuck = (id,obj)=>{

}
useEffect(()=>{
  sceneData({});
},[])
  return (
    <div className="sceneHome" style={scene.sceneHome}>
      <div className="sceneHeader">
        <PageHeader
          className="site-page-header"
          title="场景营销"
          breadcrumb={{
            routes,
          }}
        />
        <Divider plain></Divider>
        <div className="sceneHomeForm">
        <Form layout="inline" form={searchTable} initialValues={{state:"全部",marketingName:""}}>
          <Col span={8}>
            <Form.Item label="状态" name="state">
              <Select
                placeholder="请选择"
                style={{
                  width: 240,
                }}
                onChange={handleChange}
              >
                {traverse(statusClass)}
              </Select>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="名称" name="marketingName">
              <Input placeholder="请输入" style={{width:240}}></Input>
            </Form.Item>
          </Col>
          <Col span={4} offset={4}>
            <Form.Item>
              <Button type="primary" className="Btn" onClick={onFinish}>查询</Button>
              <Button onClick={()=>{reset()}}>重置</Button>
            </Form.Item>
          </Col>
        </Form>
        </div>
      </div>
      <div className="sceneTable">
      <div className="flex2">
          <div className="Content-left">
            <h3 className="Advertising-Banner-List">角色列表</h3>
          </div>
          <div className="Content-right">
            <Dropdown overlay={menu} placement="bottom" className="newBtn">
              <Button
              className="newBtn"
              type="primary"
              icon={<PlusOutlined />}
              >新建</Button>
            </Dropdown>
            <Button className="newBtn">批量操作</Button>
          </div>
        </div>
            <SceneTable Datas={tableData} fn={fuck}></SceneTable>
      </div>
    </div>
  );
};
export default SceneMarket;
